<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

	<link rel="stylesheet" href="${APP_PATH }/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="${APP_PATH }/css/font-awesome.min.css">
	<link rel="stylesheet" href="${APP_PATH }/css/main.css">
	<style>
	.tree li {
        list-style-type: none;
		cursor:pointer;
	}
	table tbody tr:nth-child(odd){background:#F4F4F4;}
	table tbody td:nth-child(even){color:#C00;}
	</style>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 用户维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
              <%@ include file="/WEB-INF/jsp/common/top.jsp"%>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
			<jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
			  <div class="panel-heading">
				<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
			  </div>
			  <div class="panel-body">
<form class="form-inline" role="form" style="float:left;">
  <div class="form-group has-feedback">
    <div class="input-group">
      <div class="input-group-addon">查询条件</div>
      <input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
    </div>
  </div>
  <button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
</form>
<button type="button" class="btn btn-danger" id="deleteBatchBtn"  style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
<button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${APP_PATH}/user/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<br>
 <hr style="clear:both;">
          <div class="table-responsive">
            <table class="table  table-bordered">
              <thead>
                <tr>
                  <th width="30">#</th>
				  <th width="30"><input id="allCheckbox" type="checkbox"></th>
                  <th>账号</th>
                  <th>名称</th>
                  <th>邮箱地址</th>
                  <th width="100">操作</th>
                </tr>
              </thead>
              <tbody>             

              </tbody>
			  <tfoot>
			     <tr >
				     <td colspan="6" align="center" >
						<ul class="pagination" id="foot">

						 </ul>
					 </td>
				 </tr>
			  </tfoot>
            </table>
          </div>
			  </div>
			</div>
        </div>
      </div>
    </div>

    <script src="${APP_PATH }/jquery/jquery-2.1.1.min.js"></script>
    <script src="${APP_PATH }/bootstrap/js/bootstrap.min.js"></script>
	<script src="${APP_PATH }/script/docs.min.js"></script>
    <script src="${APP_PATH}/script/menu.js"></script>
	<script type="text/javascript" src="${APP_PATH }/jquery/layer/layer.js"></script>

	<script type="text/javascript">
		$(function () {
			$(".list-group-item").click(function(){
				if ( $(this).find("ul") ) {
					$(this).toggleClass("tree-closed");
					if ( $(this).hasClass("tree-closed") ) {
						$("ul", this).hide("fast");
					} else {
						$("ul", this).show("fast");
					}
				}
			});
			queryPageUser(1)
            showMenu()
		});
		$("tbody .btn-success").click(function(){
			window.location.href = "assignRole.html";
		});
		$("tbody .btn-primary").click(function(){
			window.location.href = "edit.html";
		});


		function pageChange(pageno){
			<%--window.location.href="${APP_PATH}/user/index.do?pageno="+pageno ;--%>
			queryPageUser(pageno)
		}

		var loadingIndex = -1

		var jsonObj = {
			"pageNo": 1,
			"pageSize": 10
		}

		function queryPageUser(pageno){
			var tbody = $("tbody")
			tbody.empty()
			jsonObj.pageNo = pageno
			$.ajax({
				type: 'POST',
				data: jsonObj,
				url: "${APP_PATH}/user/doIndex.do",
				beforeSend: function(){
					loadingIndex = layer.load(2,{time: 10*1000})
					return true;
				},
				success: function(result){

					layer.close(loadingIndex)

					if(result.success){
						var page = result.page;
						var data = page.datas;

						$.each(data,function(index,value){
							var content = ''
							content += '<tr>';
							content += '	<td>'+(index + 1)+'</td>';
							content += '	<td><input class="checkBtn" type="checkbox" id="'+value.id+'"></td>';
							content += '	<td>'+ value.loginacct +'</td>';
							content += '	<td>'+ value.username +'</td>';
							content += '	<td>'+ value.email +'</td>';
							content += '	<td>';
							content += '		<button type="button" class="btn btn-success btn-xs assignBtn" id="'+value.id+'"><i class=" glyphicon glyphicon-check"></i></button>';
							content += '		<button type="button" class="btn btn-primary btn-xs updateBtn"><i class=" glyphicon glyphicon-pencil"></i></button>';
							content += '		<button type="button" class="btn btn-danger btn-xs deleteBtn"><i class=" glyphicon glyphicon-remove"></i></button>';
							content += '	</td>';
							content += '</tr>';
							tbody.append(content)
						});

						var foot = '';

						if(page.pageNo == 1){
							foot += '<li class="disabled"><a href="#">上一页</a></li>'
						}else{
							foot += '<li><a href="#" onclick="pageChange(' + (page.pageNo - 1) + ')">上一页</a></li>'
						}

						for(var i = 1; i <= page.totalNo; i++ ){
							foot += '<li';
							foot += page.pageNo === i ? ' class="active"' : ' '
							foot += '><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>'
						}

						if(page.totalNo == page.pageNo){
							foot += '<li class="disabled"><a href="#">下一页</a></li>'
						}else{
							foot += '<li><a href="#" onclick="pageChange(' + (page.pageNo + 1) + ')">下一页</a></li>'
						}
						$("#foot").html(foot)
					}else{
						layer.msg(result.message,{time: 1000,icon: 5,shift:6})
					}
				},
				error: function(result){
					layer.msg(result.message,{time: 1000,icon: 5,shift:6})
				}
			})
		}

		$("#queryBtn").click(function(){
			var queryText = $("#queryText").val();
			jsonObj.queryText = queryText;
			queryPageUser(1);
		})

		$(document).on("click",".updateBtn",function(){
			var no = $(this).parent().prevAll().get(2)
			no = $(no).html()
			window.location.href = "${APP_PATH}/user/toUpdate.htm?loginacct="+no
		})

		$(document).on("click",".deleteBtn",function(){

			var no = $(this).parent().prevAll().get(2)
			loginacct = $(no).html()


			layer.confirm("您确定要删除"+loginacct+"这个用户信息吗",{icon: 3,title: '提示'},function(cindex){
				$.ajax({
					type: "POST",
					url: '${APP_PATH}/user/doDelete.do',
					data: {
						loginacct,
					},
					beforeSend: function(){
						return true
					},
					success: function(result){
						if(result.success){
							window.location.href = "${APP_PATH}/user/toIndex.htm"
						}else{
							layer.msg(result.message,{time: 1000,icon: 5,shift: 6})
						}
					},
					error: function(result){
						layer.msg(result.message,{time: 1000,icon: 5,shift: 6})
					}
				})
				layer.close(cindex)
			},function(cindex){
				//取消删除
				layer.close(cindex)
			})

		})

		$("#allCheckbox").click(function(){
			var checkedStatus = this.checked;
			$("tbody tr td input[type='checkbox']").prop('checked',checkedStatus);
		})

		$(document).on('click','.checkBtn',function(){
			// alert(this.checked)
			if(this.checked == false){
				$("#allCheckbox").prop('checked',false);
			}

			var count = 0;
			var checkedBoxs = $(".checkBtn")
			$.each(checkedBoxs,function(index,item){
				if($(item).prop('checked')){
					count++;
				}
			})

			if(count === checkedBoxs.length){
				$("#allCheckbox").prop('checked',true);
			}

		})

		$("#deleteBatchBtn").click(function(){
			ids = {}

			var checkedBoxs = $(".checkBtn")
			$.each(checkedBoxs,function(index,item){
				if($(item).prop('checked')){
					item = $(item)
					var parent = item.parent()
					ids[$(item).attr('id')] = parent.next().html()
				}
			})

			var names = Object.values(ids)
			ids = Object.keys(ids)

			if(ids.length === 0){
				layer.msg("请勾选要批量删除的用户",{time: 1000,icon: 5,shift: 6})
				return false
			}

			layer.confirm("您确定要删除编号为"+names+"的	用户信息吗",{icon: 3,title: '提示'},function(cindex){
				$.ajax({
					type: "POST",
					url: '${APP_PATH}/user/doDeleteAll.do',
					data: {
						"ids[]": ids
					},
					beforeSend: function(){
						return true
					},
					success: function(result){
						if(result.success){
							window.location.href = "${APP_PATH}/user/toIndex.htm"
						}else{
							layer.msg(result.message,{time: 1000,icon: 5,shift: 6})
						}
					},
					error: function(result){
						layer.msg(result.message,{time: 1000,icon: 5,shift: 6})
					}
				})
				layer.close(cindex)
			},function(cindex){
				//取消删除
				layer.close(cindex)
			})

		})

        $(document).on('click','.assignBtn',function(){
            window.location.href = "${APP_PATH}/user/assignRole.htm?id="+this.id
        })
	</script>
  </body>
</html>
    